<?php include "header.php"; ?>
<div class="container">
	<div id="content">
		<!-- Content start -->
		<div id="top_navigation" style="margin-top: 0px;">
			<!-- Main navigation start -->
			<ul>
				<li class="active"><a href="index.php"><i class="icon-calendar"></i>
						Calender</a></li>
				<li><a href="appointees.php"><i class="icon-group"></i> Appointees</a></li>
				<li><a href="appointment-types.php"><i class="icon-th-large"></i>
						Appointment types</a></li>
				<li><a href="profile.php"><i class="icon-wrench"></i> Profile</a></li>
				<li><a href="report.php"><i class="icon-paste"></i> Reports</a></li>
			</ul>
		</div>


	</div>
	<div class="alert alert-warning hidden-phone" style="margin-top: 10px;">
		<button type="button" class="close" data-dismiss="alert">
			<i class="icon-remove"></i>
		</button>
		<strong>Important Note:</strong><br> In order to complete your profile
		<a href="profile.php">Click here</a>.
	</div>
</div>
<h2>Welcome <?php echo $row['firstname']; ?>,</h2>
<h4>Add and manage your appointments</h4>
<hr>
<div class="row-fluid mydiv">
	<div class="span3">
		<div class="well green">
			<div class="well-header">
				<h5 class="hidden-480">Calendar</h5>
			</div>

			<div class="well-content no_padding">
				<div class="input-append date" id="dp3"
					data-date-format="dd-mm-yyyy">
					<input class="span12" id="date_picker" size="16" type="text" readonly
						placeholder="Click to pick a date" style="width: 241px"> <span
						class="add-on"><i class="icon-th"></i></span>
				</div>
			</div>
		</div>

	</div>

	<div class="span9">
		<a class="btn btn-primary span4" href="#appointment_modal"
			role="button" data-toggle="modal"><i class="icon-plus"></i> <strong>Add
				appointment time</strong></a> <a href="appointees.php"
			class="btn btn-primary span4"><i class="icon-user"></i> <strong>Show
				Appointees</strong></a> <a href="#forgot-pw"
			class="btn btn-primary span4"><i class="icon-calendar"></i> <strong>Schedule
				Appointment</strong></a> <br> <br>
		<hr />

		<div class="well green">
			<div class="well-header">
				<h5>
					<strong>Appointment Times on <span id="date_header"></span><span id="ajax-loader" style="display: none"><img alt="" src="../assets/img/ajax-loader.gif" style="width: 20px; height:20px;"></span></strong>
				</h5>
			</div>
			<div class="well-content" id="show_appointments">
				
			</div>
		</div>
	</div>
</div>
</div>

<div id="appointment_modal" class="modal hide fade" tabindex="-1"
	data-width="760">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">
			<i class="icon-remove"></i>
		</button>
		<h3>Add Appointment Time</h3>
	</div>
	<div class="modal-body">
		<div class="row-fluid">
			<div class="span12">
			<form action="execute/add_appointment_time.php">
				<div class="form_row">
					<label class="field_name">Pick a date</label>
					<div class="field">
						<div class="row-fluid">
							<div class="span10">
								<div class="span12 input-append date" id="dp4"
									data-date-format="dd-mm-yyyy">
									<input class="span12" size="16" type="text" readonly
										placeholder="Click to pick a date" name="a_date" style="width: 241px"> <span
										class="add-on"><i class="icon-th"></i></span>
								</div>
							</div>

						</div>
					</div>
				</div>
				<div class="form_row">
					<label class="field_name">Pick a time</label>
					<div class="field">
						<div class="row-fluid">
							<div class="span10">
								<div class="span12 input-append bootstrap-timepicker">
            				<input type="text" class="input-small timepicker1" name="a_time" style="width: 241px">
            				<span class="add-on"><i class="icon-time"></i></span>
        				</div> 
							</div>

						</div>
					</div>
				</div>
				<div class="form_row">
					<label class="field_name">Appointment Type</label>
					<div class="field">
						<div class="row-fluid">
							<div class="span8">
								<select class="span12" name="a_type">
								<?php 
								$qry_a_type = mysql_query("SELECT * FROM appointment_types WHERE user_id='".$_SESSION['USER_ID']."'");
								while($row_a_type=mysql_fetch_array($qry_a_type)){
								?>
									<option value="<?php echo $row_a_type['id']; ?>"><?php echo $row_a_type['name']; ?> (<?php echo $row_a_type['duration']; ?> Minutes @ <?php echo $row_a_type['price']; ?> AFA)</option>
								<?php }?>
								</select>
							</div>


						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button type="submit" class="btn dark_green input-large">Add Time</button>
	</div></form>
</div>

<?php include "footer.php"; ?>